<template>
    <div class="dao" @click="gotopage" :style="styleobj">
            <van-circle v-model="currentRate" :color="gradientColor" :rate="rate" :speed="speed" :text="text" :size="size" stroke-width="50" />
        </div>
    
</template>


<script>
import router from '@/router'
export default {
    data(){
        return {
            currentRate:0,
            gradientColor: {
            '0%': '#3fecff',
            '33%': 'gold',
            '66%': 'pink',
            '100%': '#6149f6',
      },
        }
    },
    props:{
        gotopage:{
            type:Function,
            default(){
                // this 
                router.push({name:'main'})
            }
        },
        rate:{
            type:Number,
            default:100, 
        },
        speed:{
            type:Number,
            default:20, 
        },
        size:{
            type:Number,
            default:150, 
        },
        styleobj:{
            type:Object,
            default(){
                return {
                    fontSize:20
                }
            }
        }
    },
    watch:{
        currentRate(v){
            if(v==this.rate){
                this.gotopage()
            }
        }
    },
    computed:{
        text(){
            // return this.currentRate + "%"
            return  (Math.floor(this.rate/this.speed) - Math.floor(this.currentRate/this.speed))  + "S"
        }
    },
    methods:{
        
    }
}
</script>


<style lang="scss" scoped>
 .dao{
    position: absolute;
    top:20px;
    right:20px;
    z-index:1000;
    ::v-deep .van-circle__text{
        color:gold !important;
    }
  }
</style>
